<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学员数量</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        grid: {
            left: '20px',
            right: '20px',
            bottom: '60px',
            top: '16%',
            containLabel: true,
        },
        legend: {
            left: 'center',
            top: '5%',
            textStyle: {
                color: '#000',
            },
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 25,
        },
        dataZoom: [
            {
                show: true,
                height: 18,
                xAxisIndex: [0],
                bottom: 20,
                start: 0,
                end: 100,
                handleIcon:
                    'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '100%',
                handleStyle: {
                    color: 'rgba(255, 255, 255,1',
                },
                textStyle: {
                    color: '#909399',
                    fontSize: 12,
                },
                fillerColor: '#CBCED4',
                borderColor: 'rgba(255, 255, 255,1)',
                backgroundColor: '#F0F2F5',
                showDataShadow: true,
                brushSelect: false,
            },
            {
                type: 'inside',
                disabled: false,
            },
        ],
        xAxis: {
            show: true,
            type: 'category',
            name: '',
            nameLocation: 'end',
            nameTextStyle: {
                fontSize: 14,
            },
            inverse: false,
            splitLine: {
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: '#000',
                    width: 1,
                },
            },
            axisTick: {
                show: true,
                alignWithLabel: true,
                interval: 'auto',
                inside: false,
                length: 5,
                lineStyle: {
                    type: 'solid',
                    width: 1,
                    color: '#909399',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    width: 1,
                    color: '#909399',
                },
            },
            axisLabel: {
                margin: 8,
                interval: 'auto',
                rotate: 0,
                fontSize: 14,
                color: '#909399',
            },
            data: ['第一阶段', '第二阶段', '第三阶段'],
        },
        yAxis: [
            {
                show: true,
                type: 'value',
                name: '',
                min: 0,
                nameTextStyle: {
                    color: '#909399',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#909399',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    formatter: '{value} %',
                    rotate: 0,
                    textStyle: {
                        color: '#909399',
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        color: '#e4e7ed',
                    },
                },
            },
        ],
        series: [
            {name: '课程数量',
                type: 'line',
                lineStyle: {
                    type: 'solid',
                    color: '#419fff'},
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#FFFFFF',
                        borderColor: '#419fff',
                        borderWidth: 2,
                    },
                },
                data: [67, 97, 80, 76, 52, 63, 24, 13],
            },

            {name: '学员人数',
                type: 'line',
                lineStyle: {
                    type: 'solid',
                    color: '#5C41FF'},
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#FFFFFF',
                        borderColor: '#5C41FF',
                        borderWidth: 2,
                    },
                },
                data: [63, 86, 63, 62, 36, 51, 56, 22],
            },

        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>